<template>
    <div class="app-container">
        <Levelbar></Levelbar>
        <TableLayout form-title="">

            <el-form :model="search" ref="search" :rules="rules" slot="form" label-width="100px">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                            <!-- <el-select v-model="search.schoolName" filterable clearable remote reserve-keyword placeholder="请输入学校信息" :remote-method="remoteMethod" @change="btnClassList" :loading="loading" style="width:100%">
                                <el-option v-for="item in schoolList" :key="item.pId" :label="item.sName" :value="item.sName">
                                </el-option>
                            </el-select> -->
                            <school v-model="search.schoolName" style="width:100%" @change='schoolChange'></school>
                            
                        </el-form-item>
                    </el-col>
                    <el-button type="primary" class="top-btn" @click="onSubmit('search')">查询</el-button>
                </el-row>
            </el-form>

            <div class="table-title" slot="table-title">
                <span class="table-title-span"><el-button @click="buyCode()">购买</el-button></span>
                
            </div>
            
            <el-table :data="tableData" v-loading="loading" style="width: 100%" border>
                <el-table-column label="学校名称" prop="sSchoolName"  width="170" align="center"></el-table-column>
                <el-table-column label="会员月数" prop="sMonth" align="center"></el-table-column>
                <el-table-column label="单价" prop="sUnitPrice" align="center"></el-table-column>
                <el-table-column label="购买个数" prop="sNumber" align="center"></el-table-column>
                <el-table-column label="分成比例" align="center">
                    <template scope="scope">
                        {{!scope.row.sProportion? '--' : scope.row.sProportion}}
                    </template>
                </el-table-column>

                <el-table-column label="应付金额" prop="sPayable" align="center"></el-table-column>
                <el-table-column label="实付金额" prop="sPaid" align="center"></el-table-column>
                <el-table-column label="申请时间" prop="sApplyTime" align="center"></el-table-column>
                <el-table-column label="审核时间" prop="sCheckTime" align="center">
                    <template scope="scope">
                        {{!scope.row.sCheckTime? '--' : scope.row.sCheckTime}}
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template scope="scope">
                        <span v-if="scope.row.sStatus=='0'">审核中</span>
                        <el-button v-if="scope.row.sStatus=='2'" type="text" class="btn-success" @click="checkedReason(scope.row)" >驳回原因</el-button>
                        <el-button v-if="scope.row.sStatus=='1'" class="btn-success" type="text" @click="checkCode(scope.row)" >查看</el-button>
                    </template>  
                </el-table-column>
                
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <el-dialog title="驳回原因" :visible.sync="dialogFormVisible4" size="tiny">
            <div class='checkReson'>
                {{reasonContent}}
            </div>
            <div slot="footer" class="dialog-footer3">
                <el-button type="primary" @click="dialogFormVisible4=false">确定</el-button>
            </div>
        </el-dialog>


        <!--批量绑卡-->
        <batchBind :batchBind="batchBind" @bindCardState="bindCardState"></batchBind>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayouts';
import { mapState, mapActions } from 'vuex';
import validate from '@/utils/validate';
import school from 'components/SchoolClasss/school';
import batchBind from './comps/buyCode';
import {
  listActivationCodeByPage
} from 'api/numberManagement';

export default {
    name: 'orderDetails',
    components: { Levelbar, TableLayout, school, batchBind },
    data() {
        return {
            loading: false,
            schoolList: [], // 学校名称集合
            tableData: [], // 外table集合
            listQuery: {
                page: 1,
                total: 1
            },
      // 查询条件集合
            search: {
                schoolName: '',
                schoolId: '',
                className: '',
                shopName: '',
                month: '',
                phone: ''
            },
            
      // 班级列表集合
            classList: [],

            bindCard: {
                dialogFormVisible: false
            },

            batchBind: {
                dialogFormVisible: false
            },

            dialog: {
                dialogFormVisible: false,
                dialogFormVisible1: false,
                dialogFormVisible2: false
                
            },
            dialogFormVisible4: false,
            reasonContent: '',
      // 商品名称集合
            shopList: [],
            rules: {
                phone: [...validate.phone()]
            }
        };
    },
    created() {
        this.queryData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.queryData();
        },
        schoolChange(val) {
            this.search.schoolId = val;
        },
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.queryData();
                    this.listQuery.page = 1;
                } else {
                    return false;
                }
            });
        },
        queryData() {
            this.loading = true;
            listActivationCodeByPage(
                !this.search.schoolId
                ? ''
                : this.search.schoolId,
                this.listQuery.page,
                this.config.pageSize
            ).then(data => {
                this.loading = false;
                this.tableData = [];
                console.log('------1212');
                // &&data.data.content.list&&data.data.content.list.length
                if (data.data.content&&data.data.content.list&&data.data.content.list.length) {
                    this.tableData = data.data.content.list;
                    this.listQuery.total = data.data.content.pagination.total;
                }
            }).catch(Error => {
                // console.log(this.$message)
                // console.log(e);
                console.log(Error)
                this.$message.error(Error.toString());
                this.tableData = [];
                this.loading = false;
            })
        },

        // 更新
        bindCardState() {
            this.queryData();
        },
        
        // 购买激活码
        buyCode() {
            // this.loading = true;
            // 获取token
            
            // this.dialog.dialogFormVisible = true;
            this.batchBind.dialogFormVisible = true;
        },

        // 驳回原因
        checkedReason(row) {
            this.dialogFormVisible4 = true;
            this.reasonContent = row.sReason;
        },

        checkCode(row) {
            // checkCode/:id
            this.$router.push({ path: `checkCode/${row.pId}`});
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;
  @mixin box-item() {
    overflow: hidden;
    background: $bgcolor;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 14px;
    padding: 20px 20px;
  }
  @mixin tip-css {
    display: inline-block;
    height: 12px;
    width: 6px;
    border-left: 3px solid #ff5e2c;
    padding-left: 15px;
  }
  .dialog-footer3{
      text-align:center
  }
  .checkReson{
        padding:50px 100px;
    }
  .app-levelbar {
    height: 35px;
  }
  .total-sales {
    @include box-item();
    
    margin-top: 15px;
    .sales-title {
      .tip {
        @include tip-css();
      }
      .current-time {
        padding-right: 8px;
      }
    }
    .current-month {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      padding-top: 40px;
      .current-item {
        .title {
          font-size: 16px;
          color: #aaa;
          width: 50px;
          padding-bottom: 30px;
          width: 160px;
          text-align: center;
        }
        .data {
          font-size: 26px;
          color: #333;
          text-align: center;
          width: 160px;
        }
      }
    }
  }
}
</style>